<template>
  <a-list
    item-layout="vertical"
    size="large"
    :pagination="pagination"
    :dataSource="listData"
    class="page-list"
  >
    <template #renderItem="{ item }">
      <a-list-item key="item.title">
        <template #actions>
          <span class="cp">
            <component :is="EyeOutlined" style="margin-right: 8px" />
            {{ item.views }}
          </span>
          <span class="cp" @click="like(item)" style="margin-right: 8px">
            <component :is="SmileOutlined" :style="{ color: item.liked ? '#1677ff' : '' }" />
            {{ item.likes }}
          </span>
        </template>
        <template #extra>
          <img v-if="item.cover_image" height="100" alt="logo" :src="item.cover_image" />
        </template>
        <a-list-item-meta :description="item.description">
          <template #title>
            <a :href="item.href">{{ item.title }}</a>
          </template>
          <template #avatar><a-avatar :src="item.author_avatar" /></template>
        </a-list-item-meta>
        {{ item.summary }}
      </a-list-item>
    </template>
  </a-list>
</template>
<script setup lang="ts">
import { EyeOutlined, SmileOutlined } from '@ant-design/icons-vue'
import { getBlogList, likeBlog } from '@/http/blogs'
import { ref } from 'vue'

interface BlogItem {
  author_avatar?: string
  author_name?: string
  categrory_id?: number
  content: string
  cover_image?: string
  created_at?: string
  id: number
  liked?: boolean
  likes: number
  status: string
  summary: string
  title: string
  updated_at?: string
  views: number
}

const listData = ref<BlogItem[]>([])

getBlogList().then((res) => {
  listData.value = res.data.map((item) => ({
    ...item,
    author_avatar: window.location.origin + '/api/' + item.author_avatar,
    cover_image: item.cover_image ? window.location.origin + '/api/' + item.cover_image : '',
  }))
})

const like = (item: BlogItem) => {
  console.log(item.id)
  const blog = listData.value.find((item2) => item2.id === item.id)
  if (blog) {
    likeBlog(item.id, blog.liked ? 20 : 10)
    blog.likes = blog.liked ? blog.likes - 1 : blog.likes + 1
    blog.liked = !blog.liked
  }
}
// for (let i = 0; i < 23; i++) {
//   listData.push({
//     href: 'https://www.antdv.com/',
//     title: `ant design vue part ${i}`,
//     avatar: 'https://joeschmoe.io/api/v1/random',
//     description:
//       'Ant Design, a design language for background applications, is refined by Ant UED Team.',
//     content:
//       'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
//   })
// }

const pagination = {
  onChange: (page: number) => {
    console.log(page)
  },
  pageSize: 10,
}
</script>
<style lang="scss" scoped>
.page-list {
  background-color: #ffffff;
}
</style>
